import React, { Component } from 'react';
import { Form, Input, Button, Icon, message } from 'antd';
import { connect } from 'dva';
import tools from '../../utils';
import md5 from '../../utils/md5';
import css from './userLogin.css';

class page extends Component {
  state = {
    oldPasswd: null,
    newPasswd: null,
    newPasswd2: null,
  };

  componentDidMount() {
    console.clear();

    const { props } = this;
    document.getElementById('oldPasswd').focus();
    props.userLogin.loading_modifyPassword = false;
  }

  // 提交密码更改
  funcSubmit = e => {
    const { props } = this;
    e.preventDefault();
    props.form.validateFields((err, inp) => {
      if (err) return false;

      if (inp.newPasswd !== inp.newPasswd2) {
        this.funcErrMsg('两次输入的新密码不一致，请检查后再次输入。', 'newPasswd2');
        return false;
      }
      if (inp.newPasswd === inp.oldPasswd) {
        this.funcErrMsg('新密码与旧密码相同！您在开玩笑吗？', 'newPasswd');
        return false;
      }

      props.userLogin.loading_modifyPassword = true;

      const payload = {
        userId: tools.funcGetUserId(),
        token: tools.funcGetToken(),
        oldPasswd: md5.md5(inp.oldPasswd),
        newPasswd: md5.md5(inp.newPasswd),
      };
      props.dispatch({
        type: 'userLogin/modifyPassword',
        payload,
      });
      return true;
    });
  };

  // 出错反馈
  funcErrMsg = (text, id) => {
    message.warn(text);
    document.getElementById(id).focus();
  };

  // 密码输入框的内容改变事件
  funcPwChange = e => {
    const text = e.target.value;
    const id = e.target.getAttribute('data-id');
    this.state[id] = text === '' ? null : this.funcIco(id);
  };

  // 文本输入框右侧的小图标
  funcIco = (id, a = 0) => {
    const ico = a ? '' : '-o';
    return (
      <Icon
        type={'eye' + ico}
        className={css.icon2}
        data-id={id}
        onMouseDown={e => {
          let dom = e.target;
          dom = dom.getAttribute('d') ? dom.parentElement.parentElement : dom.parentElement;
          const id2 = dom.getAttribute('data-id');
          document.getElementById(id2).type = 'text';
          this.state[id] = this.funcIco(id, 1);
          this.setState({});
        }}
        onMouseUp={e => {
          let dom = e.target;
          dom = dom.getAttribute('d') ? dom.parentElement.parentElement : dom.parentElement;
          const id2 = dom.getAttribute('data-id');
          document.getElementById(id2).type = 'password';
          document.getElementById(id).focus();
          this.state[id] = this.funcIco(id);
          this.setState({});
        }}
      />
    );
  };

  render() {
    const { props, state } = this;
    const { getFieldDecorator } = props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
    };
    const tailFormItemLayout = {
      wrapperCol: { span: 20, offset: 4 },
    };

    const btn = props.userLogin.loading_modifyPassword ? '保存' : tools.funcDlgBtnSave();

    return (
      <Form onSubmit={this.funcSubmit}>
        <Form.Item label="当前密码" {...formItemLayout}>
          {getFieldDecorator('oldPasswd', {
            rules: [{ required: true, message: '请输入当前密码' }],
          })(
            <Input
              type="password"
              maxLength={20}
              placeholder="请输入您现在的密码"
              prefix={<Icon type="key" className={css.icon} />}
              suffix={state.oldPasswd}
              data-id="oldPasswd"
              onChange={this.funcPwChange}
            />
          )}
        </Form.Item>
        <Form.Item label="新密码" {...formItemLayout}>
          {getFieldDecorator('newPasswd', {
            rules: [{ required: true, message: '请输入新密码' }],
          })(
            <Input
              type="password"
              maxLength={20}
              placeholder="请输入您的新密码"
              prefix={<Icon type="unlock" className={css.icon} />}
              suffix={state.newPasswd}
              data-id="newPasswd"
              onChange={this.funcPwChange}
            />
          )}
        </Form.Item>
        <Form.Item label="密码确认" {...formItemLayout}>
          {getFieldDecorator('newPasswd2', {
            rules: [{ required: true, message: '请再次输入新密码' }],
          })(
            <Input
              type="password"
              maxLength={20}
              placeholder="请再输一遍您的新密码"
              prefix={<Icon type="lock" className={css.icon} />}
              suffix={state.newPasswd2}
              data-id="newPasswd2"
              onChange={this.funcPwChange}
            />
          )}
        </Form.Item>
        <Form.Item {...tailFormItemLayout}>
          <Button
            htmlType="submit"
            type="primary"
            className={css.submit2}
            loading={props.userLogin.loading_modifyPassword}
          >
            {btn}
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const page2 = Form.create()(page);
export default connect(({ userLogin }) => ({ userLogin }))(page2);
